import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem('Option 1', '/page1', <PieChartOutlined />),
  getItem('Option 2', '/page2', <DesktopOutlined />),
  getItem('User', '/page3', <UserOutlined />, [
    getItem('Tom', '/page3/page1'),
    getItem('Bill', '/page3/page2'),
    getItem('Alex', '/page3/page3'),
  ]),
  getItem('Team', '/page4', <TeamOutlined />, [getItem('Team 1', '/page4/page1'), getItem('Team 2', '/page4/page2')]),
  getItem('Files', '/page5', <FileOutlined />),
  getItem('退出登录', '/pageexit', <FileOutlined />),
];

const Comp: React.FC = () => {
  const useNavigateto = useNavigate()
  const currentroute = useLocation()
  console.log(currentroute);
  let firstkey: string = ''

  function findkey(obj: { key: string }) {
    return obj.key == currentroute.pathname
  }
  for (let i = 0; i < items.length; i++) {
    if (items[i]!['children'] && items[i]!['children'].length > 0 && items[i]!['children'].find(findkey)) {
      // "suppressImplicitAnyIndexErrors": true,
      firstkey = items[i]!.key as string
      break;
    }
  }
    const [openkeys, setopenkeys] = useState([firstkey]);
    const openchange = (keys: string[]) => {
      console.log(keys);
      setopenkeys([keys[keys.length - 1]])
    }
  const menuclick = (e: { key: string }) => {
    // console.log(1, e.key, e);
    // console.log("React",React);
    // console.log("React.ReactNode",React.ReactNode);
    useNavigateto(e.key)
    // useNavigateto(e.key)
  }
  return (
    <Menu theme="dark" defaultSelectedKeys={[currentroute.pathname]} mode="inline" items={items} onClick={menuclick} onOpenChange={openchange} openKeys={openkeys} />
  );
};

export default Comp;